<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>01_vue基础.html</title>
    <style>
      #app {
        background-color: pink;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <h3>电影详情</h3>
      <hr />
      <div>电影名称:{{movie.name}}</div>
      <div>电影时长:{{Math.floor(movie.duration/60)}}分钟</div>
      <div>上映时间:{{movie.showingon}}</div>
      <div>电影类型:{{movie.type}}</div>
      <div>主演1:{{movie.actor.join('/')}}</div>
      <div>主演2:{{movie.actor.join('/')}}</div>
      <div>主演3:{{movie.actor.join('/')}}</div>
      <div>主演4:{{movie.actor.join('/')}}</div>
      <div>master4测试文字</div>
      <div>测试5</div>
      <div>测试6</div>
      <div>测试7</div>
      <div>测试8</div>
    </div>
    <!-- 引入vue,基于vue的语法,渲染页面内容 -->
    <script src="./vue.js"></script>
    <script>
      new Vue({
        //data用于定义页面中所需要的用到的数据
        data: {
          movie: {
            name: "航海王·红发歌姬",
            duration: 117,
            showingon: "2022-12-22",
            type: "动画/剧情/热血",
            actor: ["红发·香克斯", "路飞", "索隆"],
          },
        },
        //el用于告诉vue.讲页面中的哪一个DOM当做vue的根元素
        el: "#app",
      });
    </script>
  </body>
</html>
